<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
 .m-player {
  width: 266px;
  height: 479px;
  background: url(../img/home/page1-bannerbg1.png) no-repeat;
  position: absolute;
  right: 50%;
  top: 10%;
}
.m-player .m-item {
  background: white;
  width: 221px;
  height: 378px;
  padding: 0 8px;
  position: absolute;
  margin: 51px 0 0 13px;
  overflow: hidden;
}
.m-player .m-list {
  top: 52px;
  position: absolute;
  width: 221px;
  overflow: hidden;
}
.m-player .m-hd {
  z-index: 9999;
  font-size: 22px;
  color: #f96046;
  position: absolute;
  width: 100%;
  background: #fff;
  font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
  text-align: center;
  line-height: 50px;
  border-bottom: 2px solid #FCAFA2;
}
.m-player li {
  font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
  line-height: 22px;
  height: 40px;
  padding: 12px 0 10px 0;
  border-bottom: 1px dashed #FEC2B2;
}
.m-player li h3 {
  font-weight: normal;
  font-size: 14px;
  color: #333131;
}
.m-player li img {
  float: left;
  display: block;
  width: 36px;
  height: 36px;
  border: 2px solid #fec2b2;
  border-radius: 50%;
  margin-right: 10px;
}
.m-player li p {
  font-size: 12px;
  color: #646464;
}
    </style>
</head>
<body>
    <div id="J_Slider" class="m-player">
    <div id="J_item" class="m-item">
        <p class="m-hd">补贴动态</p>
        <ul id="J_list" class="m-list" >
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯1</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯2</h3>
                <p>完成《百度搜索》赚了2.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯3</h3>
                <p>完成《百度搜索》赚了3.0元</p>
            </li>
            <!-- <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯4</h3>
                <p>完成《百度搜索》赚了4.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯5</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li>
            <li>
                <a href=""><img src="www/img/home/header.png" alt=""></a>
                <h3>烽火戏诸侯6</h3>
                <p>完成《百度搜索》赚了1.0元</p>
            </li> -->
        </ul>
    </div>                 
</div>
<script type="text/javascript">
window.onload=function (){
        function startmarquee(lh,speed,delay) {
        var p=false;
        var iSpeed=1;
        var timer;
        var oUl=document.getElementById("J_list");
        oUl.innerHTML+=oUl.innerHTML;
        oUl.style.marginTop=0;
        oUl.onmouseover=function(){p=true;}
        oUl.onmouseout=function(){p=false;}
        function start(){
        timer=setInterval(scrolling,speed);
        if(!p) oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
        }
        function scrolling(){
        if(parseInt(oUl.style.marginTop)%lh!=0){
        oUl.style.marginTop=parseInt(oUl.style.marginTop)+iSpeed+"px";
        if(Math.abs(parseInt(oUl.style.marginTop))>=oUl.scrollHeight/2) oUl.style.marginTop=0;
        }else{
        clearInterval(timer);
        setTimeout(start,delay);
        }
        }
        setTimeout(start,delay);
        }
    startmarquee(63,10,1500);
        }
</script>
</body>
</html>